<template>
  <div class="app-container">
    <div class="content">
      <div class="left">
        <div class="fakeBtn">系统平台分类</div>
        <ul>
          <li v-for="item in systemListFilter" :key="item.userName" @click="onclick(item)"
            :class="isActive == item.userName ? 'active' : ''">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="right" v-loading="isLoading">
        <div class="r-top">
          <div v-for="item in dataList" :key="item.id" class="dataListBox">
            <img :src="require(`@/assets/modelRun/${item.id}.png`)" />
            <div class="textBox">
              <div class="num">
                {{ item.num }}<span class="unit">/{{ item.unit }}</span>
              </div>
              <div class="text">{{ item.text }}</div>
            </div>
          </div>
        </div>

        <div class="r-bottom">
          <div class="TCardBox">
            <div class="TCard">
              <div class="cardText">数据库字符编码</div>
              <div class="TCardBottom">
                <img :src="require('@/assets/modelRun/11.png')" />
                <div class="dataText">{{ coding }}</div>
              </div>
            </div>
            <div class="TCard">
              <div class="cardText">数据库连接状态</div>
              <div class="TCardBottom">
                <img :src="require('@/assets/modelRun/22.png')" />
                <div v-if="linkStatus == 1" class="status zc">正常</div>
                <div v-else class="status yc">异常</div>
              </div>
            </div>
            <div class="TCard">
              <div class="cardText">调用数据服务的平均响应时间</div>
              <div class="TCardBottom">
                <img :src="require('@/assets/modelRun/33.png')" />
                <div>
                  <span class="large">{{ reactTime.m }}</span>
                  <span class="small">分</span>
                  <span class="large">{{ reactTime.s }}</span>
                  <span class="small">秒</span>
                  <span class="large">{{ reactTime.h }}</span>
                  <span class="small">毫秒</span>
                </div>
              </div>
            </div>
          </div>
          <div class="OCardBox">
            <div class="OCard">
              <div class="cardText">数据源用户权限</div>
              <div class="TCardBottom">
                <img :src="require('@/assets/modelRun/44.png')" />
                <div v-for="item in switchList" :key="item.id" class="switch"
                  :style="{ color: item.value == '0' ? '#a9a9a9' : '#000' }">
                  <el-switch :value="item.value" disabled> </el-switch>
                  &nbsp;&nbsp;{{ item.type }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSystemList, getDetail } from '@/api/modelRunMonitor/index.js'
export default {
  name: 'SdssDatagovernanceFrontendIndex',

  data() {
    return {
      isLoading: false,
      isActive: -1,
      systemList: [
        {
          id: 0,
          name: '管道泵阀智能应急',
        },
        {
          id: 1,
          name: '明渠梯级闸泵',
        },
        {
          id: 2,
          name: '平原水库智慧管控',
        },
        {
          id: 3,
          name: '综合告警平台',
        },
        {
          id: 4,
          name: '全局水量智慧调配',
        },
        {
          id: 5,
          name: '明渠梯级闸泵',
        },
        {
          id: 6,
          name: '知识平台',
        },
        {
          id: 7,
          name: '工程安全模型',
        },
      ],
      dataList: [
        {
          id: 0,
          name: 'modelNum',
          num: 0,
          text: '模型个数',
          unit: '个',
        },
        {
          id: 1,
          name: 'viewNum',
          num: 0,
          text: '视图个数',
          unit: '个',
        },
        {
          id: 2,
          name: 'dataRecordNum',
          num: 0,
          text: '数据记录数',
          unit: '条',
        },
        {
          id: 3,
          name: 'volumeStatistics',
          num: 0,
          text: '数据量统计',
          unit: 'M',
        },
        {
          id: 4,
          name: 'lockedThreadNum',
          num: 0,
          text: '被锁定线程数',
          unit: '个',
        },
        {
          id: 5,
          name: 'sessionNum',
          num: 0,
          text: '会话数',
          unit: '个',
        },
      ],
      switchList: [
        {
          id: 0,
          type: '读数',
          value: false,
          name: 'isRead',
        },
        {
          id: 1,
          type: '写数',
          value: false,
          name: 'isWrite',
        },
        {
          id: 2,
          type: '表结构',
          value: false,
          name: 'isUpdateStructure',
        },
        {
          id: 3,
          type: '添加表',
          value: false,
          name: 'isCreateTable',
        },
        {
          id: 4,
          type: '删除表',
          value: false,
          name: 'isDeleteTable',
        },
      ],
      coding: '',
      linkStatus: null,
      reactTime: {
        m: 0,
        s: 0,
        h: 0
      },
    }
  },
  computed: {
    systemListFilter() {
      const list = []
      this.systemList.forEach((v, i) => {
        if (v.userName) {
          list.push(v)
        }
      })
      return list
    },
  },
  created() {
    this.getSystem()
  },
  mounted() { },

  methods: {
    onclick(item) {
      console.log(item.id)
      this.isActive = item.userName
      this.isLoading = true
      const params = { userName: item.userName }
      getDetail(params).then((res) => {
        console.log(res, 'getDetail')
        const result = res.data
        console.log(result, '1111111111111111');
        this.coding = result.coding
        this.linkStatus = result.linkStatus
        let num = result.reactTime * 1
        if (num < 60) {
          this.reactTime.m = 0
          this.reactTime.s = num
          this.reactTime.h = num
        } else {
          this.reactTime.m = parseInt(num / 60 / 1000)
          this.reactTime.s = parseInt(num / 1000)
          this.reactTime.h = num
        }
        Object.keys(result).forEach((k) => {
          console.log('key:', k, 'value:', result[k])
          this.dataList.forEach((v) => {
            if (v.name == k) {
              v.num = result[k]
            }
          })
          this.switchList.forEach((p) => {
            if (p.name == k) {
              p.value = result[k]
            }
          })
        })
        this.isLoading = false
      })
    },

    getSystem() {
      getSystemList().then((res) => {
        console.log(res, 'getSystemList')
        this.systemList = res.data
        this.onclick(this.systemListFilter[0])
      })
    },
    //目前开关只展示,不能修改,若需求改为需要修改,可直接使用
    switchChange(item) {
      this.$confirm(`此操作将${item.value == '0' ? '开启' : '关闭'}${item.type}权限, 是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'confirm-button-sure',
        cancelButtonClass: 'confirm-button-cancel',
      })
        .then(() => {
          if (item.value == '0') {
            item.value = '1'
          } else {
            item.value = '0'
          }
        })
        .catch(() => {
          this.$message.warning('取消操作')
        })
    },
    Paa(age) {
      this.age = age
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
}

.left {
  width: 18%;
  height: 100%;
  padding: 0 20px 0 20px;
}

.fakeBtn {
  font-family: Source Han Sans SC;
  font-weight: 400;
  font-size: 0.8333vw;
  color: #ffffff;
  text-align: center;
  width: 6.25vw;
  height: 1.8229vw;
  line-height: 1.8229vw;
  background-color: #1990ff;
  border-radius: 0.2604vw;
}

ul {
  list-style-type: none;
  width: 100%;
  margin-left: -2.6042vw;
}

li {
  width: 100%;
  font-family: Source Han Sans SC;
  font-weight: 400;
  font-size: 0.8333vw;
  color: #55575b;
  line-height: 1.5625vw;
  cursor: pointer;
  padding-left: 1.1417vw;
}

li:hover {
  background-color: #eef6ff;
}

li:hover::before {
  background-color: #eef6ff;
}

li::before {
  content: '•';
  color: #1990ff;
  display: inline-block;
  width: 1em;
  font-size: 0.7813vw;
}

.active {
  background-color: #eef6ff;
}

.right {
  width: 80%;
  height: 100%;

  .r-top {
    width: 80%;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .dataListBox {
    width: 15.8333vw;
    padding-top: 3.3667vw;
    display: flex;
    align-items: center;

    img {
      display: block;
      width: 3.125vw;
      height: 4.6875vw;
    }

    .textBox {
      margin-left: 0.625vw;

      .num {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 1.6667vw;
        color: #547dff;
        line-height: 0.5208vw;
        margin-bottom: 0.7813vw;

        .unit {
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 0.7292vw;
          color: #666666;
          line-height: 0.5208vw;
          padding-left: 0.3125vw;
        }
      }

      .text {
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 0.8333vw;
        color: #666666;
        line-height: 0.8333vw;
      }
    }
  }
}

.r-bottom {
  margin-top: 4.9708vw;
  padding-left: 2.0833vw;
}

.TCardBox {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.TCard {
  width: 19.0417vw;
  height: 8.4583vw;
  background-color: #f5f5f5;
  padding-top: 0.565vw;
  border-radius: 0.4208vw;

  .cardText {
    font-family: Source Han Sans SC;
    font-weight: bold;
    font-size: 0.725vw;
    color: #ffffff;
    line-height: 1.5625vw;
    height: 1.5625vw;
    background: linear-gradient(to right, #547dff 0%, #5e85fe 40%, #a3b8fa 65%, #f5f5f5 90%);
    margin: 0 0 0.465vw 0;
    padding-left: 1.0417vw;
  }

  .TCardBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3.6042vw;
    padding: 0 1.5625vw 0 1.5625vw;
  }

  img {
    display: block;
    width: 1.6625vw;
    height: 1.6625vw;
  }

  .dataText {
    font-family: Source Han Sans SC;
    font-weight: 500;
    font-size: 1.1vw;
    color: #547dff;
  }
}

.OCardBox {
  width: 90%;
  margin-top: 1.8229vw;
}

.OCard {
  width: 100%;
  height: 8.4583vw;
  background-color: #f5f5f5;
  padding-top: 0.565vw;
  border-radius: 0.4208vw;

  .cardText {
    width: 19.0417vw;
    font-family: Source Han Sans SC;
    font-weight: bold;
    font-size: 0.725vw;
    color: #ffffff;
    line-height: 1.5625vw;
    height: 1.5625vw;
    background: linear-gradient(to right, #547dff 0%, #5e85fe 40%, #a3b8fa 65%, #f5f5f5 90%);
    margin: 0 0 0.465vw 0;
    padding-left: 1.0417vw;
  }

  .TCardBottom {
    display: flex;
    align-items: center;
    margin-top: 2.3042vw;
    padding: 0 1.5625vw 0 1.5625vw;
  }

  img {
    display: block;
    width: 1.6625vw;
    height: 1.6625vw;
    margin-right: 5.2083vw;
  }
}

.switch {
  width: 10.4167vw;
  font-family: Source Han Sans SC;
  font-weight: 400;
  font-size: 0.8333vw;
}

.status {
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-size: 1.25vw;
}

.zc {
  color: #00cbac;
}

.yc {
  color: #ff5454;
}

.large {
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-size: 1.25vw;
  color: #547dff;
}

.small {
  font-family: Source Han Sans SC;
  font-weight: 500;
  font-size: 0.7292vw;
  color: #547dff;
  margin-left: 5px;
}
</style>
